<template>
    <div class="container">
        <div class="col-md-10 col-md-offset-1">
            <el-row>
                <el-col :span="4">
                    <label>
                        <input
                                type="checkbox"
                                v-model="horizontal"
                        > 是否横向展示
                    </label>
                </el-col>
                <el-col :span="4">
                    <label>
                        <input
                                type="checkbox"
                                v-model="collapsable"
                        > 是否可被展开
                    </label>
                </el-col>
                <el-col :span="4">
                    <label>
                        <input
                                type="checkbox"
                                v-model="expandAll"
                                @change="expandChange"
                        > 是否展开所有
                    </label>
                </el-col>
            </el-row>
            <div class="oTree">
                <vue2-org-tree :data="data"
                               :horizontal="horizontal"
                               :collapsable="collapsable"
                               :render-content="renderContent"
                               @on-expand="onExpand"
                               @on-node-click="onNodeClick" />
            </div>
        </div>
    </div>

</template>

<script>
    export default {
        name: "组织展示",
        data() {
            // 测试数据
            return {
                data: {
                    id: 0,
                    label: '乱球开发科技四川分公司',
                    children: [
                        {
                            id: 2,
                            label: '技术部',
                            children: [
                                {
                                    id: 5,
                                    label: '前端部门',
                                    children: [
                                        {
                                            id: 10,
                                            label: '小谢',
                                        },
                                        {
                                            id: 11,
                                            label: '小于',
                                        },
                                        {
                                            id:12,
                                            label:'小菜'
                                        },
                                    ],
                                },
                                {
                                    id: 6,
                                    label: '后端部门',
                                    children: [
                                        {
                                            id:12,
                                            label:'小胡'
                                        },
                                        {
                                            id:12,
                                            label:'小向'
                                        },
                                    ],
                                },
                                {
                                    id: 9,
                                    label: 'UI设计',
                                    children:[
                                        {
                                            id:15,
                                            label:'小魏'
                                        }
                                    ]
                                },
                                {
                                    id: 10,
                                    label: '测试部门',
                                    children:[
                                        {
                                            id:16,
                                            label:'小张'
                                        }
                                    ]
                                },
                            ],
                        },
                        {
                            id: 3,
                            label: '项目部',
                            children: [
                                {
                                    id: 7,
                                    label: '项目一部',
                                    children:[
                                        {
                                            id:17,
                                            label:'淘宝网，淘！你喜欢'
                                        },
                                    ]
                                },
                                {
                                    id: 8,
                                    label: '项目二部',
                                    children:[
                                        {
                                            id:18,
                                            label:'百度一下，你就知道'
                                        },
                                        {
                                            id:19,
                                            label:'elementUI，VUE开发最好用的UI框架'
                                        },
                                    ]
                                },
                            ],
                        },
                        {
                            id: 4,
                            label: '瞎指挥部',
                            children:[
                                {
                                    id:13,
                                    label:'小料'
                                },
                                {
                                    id:13,
                                    label:'小留'
                                }
                            ]
                        },
                        {
                            id: 9,
                            label: '人事部',
                            children:[
                                {
                                    id:14,
                                    label:'笑笑'
                                }
                            ]
                        },
                    ]
                }
            }
        },
        methods: {
            renderContent(h, data) {
                return data.label
            },
            // 节点点击展开/折叠（注意：参数e需要携带）
            onExpand(e, data) {
                if ('expand' in data) {
                    data.expand = !data.expand
                    if (!data.expand && data.children) {
                        this.collapse(data.children)
                    }
                } else {
                    this.$set(data, 'expand', true)
                }
            },
            // 节点点击
            onNodeClick(e, data) {
                alert(data.label)
            },
            collapse(list) {
                var _this = this
                list.forEach(function(child) {
                    if (child.expand) {
                        child.expand = false
                    }
                    child.children && _this.collapse(child.children)
                })
            },
            // 是否全部展开
            expandChange() {
                this.toggleExpand(this.data, this.expandAll)
            },
            toggleExpand(data, val) {
                var _this = this
                if (Array.isArray(data)) {
                    data.forEach(function(item) {
                        _this.$set(item, 'expand', val)
                        if (item.children) {
                            _this.toggleExpand(item.children, val)
                        }
                    })
                } else {
                    this.$set(data, 'expand', val)
                    if (data.children) {
                        _this.toggleExpand(data.children, val)
                    }
                }
            },
        }
    }
</script>

<style scoped>
    .oTree {
        margin-top: 50px;
        text-align: center;
        width: 100%;
        height: 100%;
    }

    .oTree>>>.org-tree-node-label-inner {
        white-space: nowrap;
        background-color: white;
        border-radius: 5px;
        padding: 10px 20px;
        border:2px #ccc solid;
    }
</style>
